<template>
	<div class="title">	
		<div class="button">
			<router-link :to="{'name':'login'}" > <van-icon name="arrow-left" style="color: white;" /> </router-link>
		</div>
		<div >注册</div>
	</div>
	
	<div>
		 <van-form @submit="onSubmit">
		   <van-cell-group inset>
		 	  <van-field name="uploader" label="上传头像">
		 	    <template #input>
		 	      <van-uploader v-model="value" />
		 	    </template>
		 	  </van-field>
		   </van-cell-group>
		   
		   <van-cell-group inset>
		     <van-field
			   required="null"
		       v-model="username"
		       name="username"
		       label="用户名"
		       placeholder="用户名"
		       :rules="[
		 		  { required: true, message: '请填写用户名' },
		 		  { validator: checkUserRepete, message: '用户名已存在'}
		 		  ]"
		     />
			 
		     <van-field
			   required="null"
		       v-model="password"
		       type="password"
		       name="password"
		       label="密码"
		       placeholder="密码"
		       :rules="[{ required: true, message: '请填写密码' }]"
		     />
			 
		 	<van-field
			  required="null"
		 	  v-model="re_password"
		 	  type="password"
		 	  name="re_password"
		 	  label="密码"
		 	  placeholder="再次输入密码"
		 	  :rules="[
		 		  { required: true, message: '请再次填写密码' },
		 		  { validator: checkRePassword, message: '两次密码不一致'}
		 		  ]"
		 	/>
			
			<van-field name="radio" label="用户类型" required="null">
			  <template #input>
			    <van-radio-group v-model="checked" direction="horizontal">
			      <van-radio name="1">普通用户</van-radio>
			      <van-radio name="2">商家用户</van-radio>
			    </van-radio-group>
			  </template>
			</van-field>
			
		 	<van-field
		 	  required="null"
		 	  v-model="tel"
		 	  type="tel"
		 	  name="tel"
		 	  label="手机号"
		 	  placeholder="手机号"
		 	  :rules="[{ required: true, message: '请输入11位手机号码' }]"
		 	/>

			  <van-field
			    v-model="sms"
			    center
			    clearable
			    label="短信验证码"
			    placeholder="请输入短信验证码"
			  >
			    <template #button>
			      <van-button size="small" type="primary">发送验证码</van-button>
			    </template>
			  </van-field>
		   </van-cell-group>
		   
		   <div style="margin: 16px;">
		       <van-button round block type="primary" native-type="submit">
		         提交
		       </van-button>
		     </div>
			<div class="center">
				<p>已经有账号了，去<router-link :to="{'name':'login'}">登录</router-link></p>
			</div>
		   
		</van-form>
	</div>
</template>



<script lang="ts" setup>
	 import { ref } from 'vue';
	 import {checkUsername, createUser} from '@/api/user'
	 import 'vant/es/toast/style';
	 import { Toast } from 'vant';
	 import router from '@/router';
	 
	 const username = ref('');
	 const password = ref('');
	 const re_password = ref('');
	 const tel = ref('');
	 const checked = ref('1');
	 const value = ref([
	       // { url: 'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg' },
	     ]);
	 
	 const onSubmit = (values) => {
	     console.log('submit', values);
		 createUser(values)
		 .then(res=>{
		 	console.log(res)
		 	if(res.code!=0){
		 		// 注册失败
		 		Toast.fail('注册失败');
		 		console.log("注册失败")
		 	}else{
		 		// 注册成功
		 		Toast.fail('注册成功');
		 		console.log("注册成功")
		 		router.push("/login")
		 	}
		 })
		 .catch(err=>{
		 	// 服务器失败
		 	console.log(err)
		 })
	 };
	 
	 // function onSubmit(values){
	 // 	console.log('submit', values);
	 // }
	 
	 const checkRePassword = (val) => {
	 	// 返回true验证成功，flase表示验证失败
	 	console.log("检查两次密码是否一致")
	 	if(password.value != re_password.value){
	 		return false
	 	}
	 	return true
	 }
	 
	 const checkUserRepete = (val) => {
	 	console.log("检查用户名是否重复")
	 	const params = {
	 		"username":val
	 	}
	 	
	 	var result = checkUsername(params)
	 	.then(res => {
	 		console.log(res)
	 		if(res.code != 0){
	 			return `用户名已经被占用，参考用户名....`
	 		}
	 		return true
	 	})
	 	return result
	 }

	

 </script>




<style scoped>
	.button{
		position: absolute;
		padding-left: 5px;
	}
	
	.title{
		size:1px;
		height: 50px;
		line-height: 50px;
		background-color: #1989fa;
	    color: white;
		text-align: center;
		margin-top: 0px ;
		margin-bottom: 40px;
	
	}
</style>